<template>
  <div class="nav-bar">
    <div class="nav-left">
      <div class="logo">长隆旅游社</div>
      <div class="nav-menu">
        <el-menu mode="horizontal" :default-active="activeMenu" router>
          <el-menu-item index="/">首页</el-menu-item>
          <el-menu-item index="/scenic">景点门票</el-menu-item>
          <el-menu-item index="/hotel">酒店住宿</el-menu-item>
          <el-menu-item index="/travel">跟团游</el-menu-item>
          <el-menu-item index="/about">关于我们</el-menu-item>
        </el-menu>
      </div>
    </div>
    <div class="nav-right">
      <el-dropdown trigger="click">
        <div class="avatar-wrapper">
          <el-avatar icon="el-icon-user-solid" size="medium"></el-avatar>
          <i class="el-icon-caret-bottom"></i>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人中心</el-dropdown-item>
          <el-dropdown-item>我的订单</el-dropdown-item>
          <el-dropdown-item divided @click.native="handleLogout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NavBar',
  computed: {
    activeMenu() {
      return this.$route.path
    }
  },
  methods: {
    handleLogout() {
      this.$confirm('确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('user/logout')
        this.$router.push('/login')
        this.$message.success('退出成功')
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.nav-bar {
  height: 60px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;

  .nav-left {
    display: flex;
    align-items: center;

    .logo {
      font-size: 20px;
      font-weight: bold;
      color: #302b63;
      margin-right: 40px;
      cursor: pointer;
      white-space: nowrap;
    }

    .nav-menu {
      ::v-deep .el-menu {
        border: none;
        background: transparent;

        .el-menu-item {
          height: 60px;
          line-height: 60px;
          font-size: 16px;
          color: #606266;
          padding: 0 20px;

          &:hover, &:focus {
            color: #302b63;
          }

          &.is-active {
            color: #302b63;
            border-bottom: 2px solid #302b63;
          }
        }
      }
    }
  }

  .nav-right {
    margin-left: auto; // 确保右侧内容靠右

    .avatar-wrapper {
      display: flex;
      align-items: center;
      cursor: pointer;
      padding: 5px 10px;
      border-radius: 4px;
      transition: background-color 0.3s;

      &:hover {
        background: #f5f7fa;
      }

      .el-avatar {
        margin-right: 5px;
        background: #302b63;
      }

      .el-icon-caret-bottom {
        font-size: 12px;
        color: #909399;
      }
    }

    ::v-deep .el-dropdown-menu {
      padding: 5px 0;

      .el-dropdown-menu__item {
        padding: 8px 20px;
        font-size: 14px;

        &:hover {
          background-color: #f5f7fa;
          color: #302b63;
        }

        &.is-divided {
          border-top: 1px solid #ebeef5;
          margin: 6px 0;
        }
      }
    }
  }
}
</style>
